import * as THREE from "three";

function main(dom: HTMLDivElement) {
  // 创建一个场景
  const scene = new THREE.Scene();

  // 创建相机
  // PerspectiveCamera（透视摄像机）。
  const camera = new THREE.PerspectiveCamera(
    75, // 视野角度（FOV）。视野角度就是无论在什么时候，你所能在显示器上看到的场景的范围
    window.innerWidth / window.innerHeight, // 长宽比（aspect ratio）。 也就是你用一个物体的宽除以它的高的值。比如说，当你在一个宽屏电视上播放老电影时，可以看到图像仿佛是被压扁的。
    0.1, // 近截面（near）当物体某些部分比摄像机的远截面远或者比近截面近的时候，该这些部分将不会被渲染到场景中。
    1000 // 远截面（far）
  );
  // 创建一个渲染器
  const renderer = new THREE.WebGLRenderer();
  // 设置一个渲染器的尺寸
  // 你可以使用 setSize 传入一个较小的值，例如 window.innerWidth/2 和 window.innerHeight/2，这将使得应用程序在渲染时，以一半的长宽尺寸渲染场景。
  // 调用 setSize(window.innerWidth/2, window.innerHeight/2, false) 将使得你的应用程序以四分之一的大小来进行渲染。
  renderer.setSize(window.innerWidth, window.innerHeight);

  // 我们将 renderer（渲染器）的dom元素（renderer.domElement）添加到我们的 HTML 文档中。这就是渲染器用来显示场景给我们看的 <canvas> 元素。
  dom.appendChild(renderer.domElement);

  // 添加立方体。
  // BoxGeometry（立方体）对象
  const geometry = new THREE.BoxGeometry(1, 1, 1);
  // 立方体材质
  const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
  // 网格， 网格包含一个几何体以及作用在此几何体上的材质，我们可以直接将网格对象放入到我们的场景中，并让它在场景中自由移动。
  const cube = new THREE.Mesh(geometry, material);
  // 将网格添加到场景中
  scene.add(cube);
  // 相机位置偏移一点
  camera.position.z = 5;

  function animate() {
    requestAnimationFrame(animate);

    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;

    renderer.render(scene, camera);
  }

  animate();
}

export default main;

function createMesh(data, color, depth) {
  return;
}
